<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Object Model</title>
</head>
<style>
    .plain{
        outline: #409eff43 ;

    }
    @keyframes openYourHeart {from {r: 0} to {r: 30px}}

#circle circle {
  animation: openYourHeart 15s infinite alternate;
}
</style>
<body>
    <section>
        <pre accesskey="p" contenteditable="true" id="p1">
            1 el.getAttribute()方法的传参与实际属性名是一样的 如class 而不是className,属性名不区分大小写，标签名返回值一般为大写
               el的style 返回css字符串，而dom的返回值为一个对象    ，document没有getAttribute方法,获取事件 如onclick el会返回源码字符串
               doc会返回一个函数 ，没有对应属性返回null
            2 el.dir 属性决定了其内部元素的排列方向 ‘rtl’ 从右到左，‘ltl’从左到右，会继承，不影响文字方向，
            3 使用setAttribute 定义新的自定义属性后，大多浏览器用getAttribute并不能获取到，不是原生所可能具有的属性
               所以一般用于修改自定义属性 
            4 el.attributes element 类型是唯一使用attributes 属性的dom节点类型   是一个NamedNodeMap 集合 键为属性名
        </pre>
    </section>
    <section>
        <svg viewBox="0 0 100 100">
            <clipPath id= "circle">
                <circle cx="50%" cy="50%" r ="35"></circle>
            </clipPath>
            <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
             <use clip-path="url(#circle)" xlink:href="#heart" fill="red" />
            
        </svg>
        <!-- 这种剪切 剪切的是内部， -->
    </section>
</body>
<script>    
    let watcher = new MutationObserver((e,f)=>{console.group(e,f)})
    /* 第二个参数是MutationObserver的实例，但是啥子属性也没有 */
    let p1 = document.getElementById('p1')
    p1.className = "3"
    p1.setAttribute('words',100)
    watcher.observe(p1,{attributes:true,attributeOldValue:true})
    // attributeOldValue 默认为 false ,数组元素此项属性为空
    p1.className = "plain"
    p1.setAttribute('words',200)
    p1.setAttribute('words',300)
    p1.setAttributeNS('namespace','qualifiedName','命运')
    p1.className += " casuel"

    watcher.disconnect() // 结束所有监听，如果监听处于进行时那么也不会触发 ，所有没触发的监听都胎死腹中，但是这个observer仍然存在
    // 虽然改变了四次 但是监听只触发了一次，异步,不过结果数组包含所有的变化，
//      addedNodes: NodeList []
//      attributeName: "class"
//      attributeNamespace: null
//      nextSibling: null
//      oldValue: "3"
//      previousSibling: null
//      removedNodes: NodeList []
//      target: pre#p1.plain.casuel
//      type: "attributes"
// __proto__: MutationRecord
// 1: MutationRecord {type: "attributes", target: pre#p1.plain.casuel, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null, …}
// 2: MutationRecord {type: "attributes", target: pre#p1.plain.casuel, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null, …}
// 3: MutationRecord {type: "attributes", target: pre#p1.plain.casuel, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null, …}
// 4: MutationRecord {type: "attributes", target: pre#p1.plain.casuel, addedNodes: NodeList(0), removedNodes: NodeList(0), previousSibling: null, …}

</script>
</html>